<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.alibaba.fastjson.JSON" %>
<html>
<head>
    <title>订单管理</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
</head>
<body>
<div id="app" class="container mt-4">
    <h2>订单管理</h2>
    <div class="mb-2">
        <a href="/order/add" class="btn btn-success">新增订单</a>
        <input v-model="search" class="form-control d-inline-block w-25 ml-3" placeholder="搜索订单ID或客户ID">
    </div>
    <table class="table table-bordered table-hover">
        <thead class="thead-light">
        <tr>
            <th>ID</th>
            <th>客户ID</th>
            <th>总价</th>
            <th>状态</th>
            <th>下单时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="o in filteredOrders" :key="o.id">
            <td>{{o.id}}</td>
            <td>{{o.customerId}}</td>
            <td>{{o.totalPrice}}</td>
            <td>{{o.status}}</td>
            <td>{{o.createTime}}</td>
            <td>
                <a :href="'/order/edit/' + o.id" class="btn btn-sm btn-primary">编辑</a>
                <a :href="'/order/delete/' + o.id" class="btn btn-sm btn-danger ml-1" onclick="return confirm('确定删除？')">删除</a>
                <a :href="'/orderItem/list/' + o.id" class="btn btn-sm btn-info ml-1">订单商品</a>
                <a :href="'/delivery/list/' + o.id" class="btn btn-sm btn-secondary ml-1">配送</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    var ordersData = JSON.parse('<%= request.getAttribute("orders") == null ? "[]" : JSON.toJSONString(request.getAttribute("orders")) %>');
    new Vue({
        el: '#app',
        data: {
            search: '',
            orders: ordersData
        },
        computed: {
            filteredOrders() {
                if (!this.search) return this.orders;
                return this.orders.filter(function(o){
                    return (o.id && o.id.toString().indexOf(this.search) !== -1) ||
                           (o.customerId && o.customerId.toString().indexOf(this.search) !== -1);
                }.bind(this));
            }
        }
    });
</script>
</body>
</html> 